<template class="lct">
    <a-tabs v-model:activeKey="activeTab" :animated="false"  type="editable-card" @edit="onPaneEdit" @change="onPaneChange">
        <a-tab-pane key="home" tab="主进程" :closable="false">
            <X6Editor mode="edit" graphId = "main"></X6Editor>
        </a-tab-pane>
        <a-tab-pane v-for="pane in panes" :key="pane.key" :tab="pane.title" :closable="true">
            <X6Editor mode="edit" :graphId = "pane.key"></X6Editor>
        </a-tab-pane>
    </a-tabs>
</template>
<script>
import X6Editor from '@/components/X6Editor/index.vue'
import { reactive, ref } from '@vue/reactivity'
import { provide } from '@vue/runtime-core'
export default {
    components: {
        X6Editor
    },
    setup () {
        const activeTab = ref('home')

        // 解决X6 VUE组件当tabs切换时 editor传参错误
        const cmptCellInfo = reactive({
            data: { name: '' }
        })
        provide('cmptCellInfo', cmptCellInfo)

        // 设置画布高度
        const rightBoxHeight = ref('600px')
        rightBoxHeight.value = (document.getElementsByTagName('body')[0].offsetHeight - 45 - 20) + 'px'

        // 页签
        const panes = ref([])

        // 新增tabs
        const addTabs = (data) => {
            const findIndex = panes.value.findIndex((item) => {
                return item.key === data.data.id
            })
            if (!~findIndex) {
                panes.value.push({
                    title: data.data.name,
                    key: data.data.id
                })
                activeTab.value = data.data.id
            } else {
                activeTab.value = panes.value[findIndex].key
            }
            console.log('add')
        }
        provide('addTabs', addTabs)

        // tabs新增删除事件
        const onPaneEdit = (e, type) => {
            type === 'remove' && onDelPane(e)
        }
        // 删除
        const onDelPane = (e) => {
            console.log(e)
            const currentIndex = panes.value.findIndex((item) => {
                return item.key === e
            })
            activeTab.value = currentIndex === 0 ? 'home' : panes.value[currentIndex - 1].key
            panes.value.splice(currentIndex, 1)
        }

        // tab change
        const onPaneChange = () => {
            console.log('123')
        }

        return {
            activeTab,
            rightBoxHeight,
            panes,
            onPaneEdit,
            onPaneChange
        }
    }
}
</script>
<style lang="less" scoped>
    .ant-tabs{
        height: 100%;
        overflow: inherit;
        &:deep(.ant-tabs-bar){
            position: sticky;
            top: 0;
            background: white;
            z-index: 9;
        }
        &:deep(.right-box){
            top: 45px;
            height: v-bind(rightBoxHeight);
        }
    }

</style>
